import React from 'react';
import Item from './components/caseItem'
import useTitle from '../../hooks/useTitle';
import axios from 'axios';
import HOST from '../../utils/const';
import { useState, useEffect } from 'react';
import './index.css';

function Case() {
  useTitle(Case.title);
  const [detail, setDetail] = useState([]);
  const [id, setID] = useState([]);
  const [change, setChange] = useState(false);
  const [content, setContent] = useState([]);
  const [create, setCreate] = useState(false);
  const [dom, setDom] = useState([]);
  useEffect(() => {
    axios.get(HOST + `/method/monitor?case=4`).then((res) => {
      switch (res.data.split('\n')[0]) {
        case 'code=20': {
          const res1 = getContent(res.data.split('\n'));
          setDetail(res1.title);
          setContent(res1.res);
          setID(res1.id);
          break;
        }
        default: {
          alert('未知错误');
          break;
        }
      }
    }).catch((err) => {
      console.log(err);
    });
  }, [change])

  useEffect(()=>{
    const mid = detail.map((item, index) => {
      console.log(item, index, content , detail)
      return  content[index] && <Item detail={item} key={item} id={index} remove={remove} content={content[index]} caseID={id[index]} />
    }
    )
    setDom(mid);
    // eslint-disable-next-line
  },[change, detail, content,id])
  function getContent(str) {
    const res = [];
    const title = [];
    const id = [];
    for (let i = 1; i < str.length; i++) {
      const mid = str[i].split('\t')
      str[i] && title.push(mid[0]);
      str[i] && res.push(mid[1].split('$'))
      str[i] && id.push(mid[2])
    }
    return { res, title, id };
  }
  function creat() {
    setCreate(false)
    const title = document.getElementById('case-create-name').value;
    const one = document.getElementById('case-create-1').value;
    const two = document.getElementById('case-create-2').value;
    const three = document.getElementById('case-create-3').value;
    const four = document.getElementById('case-create-4').value;
    const res = one + '$' + two + '$' + three + '$' + four;
    axios.post(HOST + `/method/form`, JSON.stringify({
      case: 1,
      title,
      content: res
    })).then((res) => {
      switch (res.data) {
        case 'code=12\n': {
          alert('新增失败');
          setChange(!change);
          break;
        }
        case 'code=11\n': {
          alert('新增成功');
          setChange(!change);
          break;
        }
        default: {
          alert('未知错误');
          break;
        }
      }
    }).catch((err) => {
      console.log(err);
    });
  }
  function remove(index) {
    axios.get(HOST + `/method/monitor?case=6&id=${index}`).then((res) => {
      switch (res.data) {
        case 'code=13\n': {
          alert('删除成功');
          setChange(!change);
          break;
        }
        case 'code=14\n': {
          alert('删除失败');
          setChange(!change);
          break;
        }
        default: {
          alert('未知错误');
          break;
        }
      }
    }).catch((err) => {
      console.log(err);
    });
  }

  return (
    <div className='study'>
      <div className="mask" style={create ? { display: 'block' } : { display: 'none' }}></div>
      <div className='detail-case' style={create ? { display: 'block' } : { display: 'none' }}>
        <div className='detail-case-topbar'>
          <input style={create ? { display: 'block' } : { display: 'none' }} type="text"
            id='case-create-name' />
        </div>
        <div className='detail-case-content'>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>接诊</div>
            <input style={create ? { display: 'block' } : { display: 'none' }} type="text"
              className='detail-case-content-text' id='case-create-1' />
          </div>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>病例检查</div>
            <input style={create ? { display: 'block' } : { display: 'none' }} type="text"
              className='detail-case-content-text' id='case-create-2' />
          </div>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>诊断结果</div>
            <input style={create ? { display: 'block' } : { display: 'none' }} type="text"
              className='detail-case-content-text' id='case-create-3' />
          </div>
          <div className='detail-case-content-item'>
            <div className='detail-case-content-name'>治疗方案</div>
            <input style={create ? { display: 'block' } : { display: 'none' }} type="text"
              className='detail-case-content-text' id='case-create-4' />
          </div>
        </div>
        <div className='detail-case-footbutton' style={create ? { display: 'block' } : { display: 'none' }}
          onClick={creat}>新建</div>
      </div>
      <div className='study-topbar'>
        <div className='check-button-create' onClick={() => { setCreate(true) }}>新建</div>
      </div>
      <div className='study-detail'>
        <div className='study-detail-topbar'>
          <div className='detail-casename'>用户名</div>
          <div className='detail-operation'>操作</div>
        </div>
        {dom}
        <div className='study-detail-footbar'>
          <div className='case-total'>共 {detail.length} 条</div>
          <div className='case-pagesize'>
            {/* <select className='pagesize-select' name='pagesize' id='pagesize' onChange={() => {
              setPageSize(Number(document.getElementById("pagesize").value));
            }}>
              <option value="6">5条/页</option>
              <option value="10">10条/页</option>
            </select> */}
          </div>
          {/* <div className='change-page'>
            <div className='last-page'>
              <div className='left-arrow' onClick={lastPage}></div>
            </div>
            <div className='current-page'>{pageNum}</div>
            <div className='next-page'>
              <div className='right-arrow' onClick={nextPage}></div>
            </div>
          </div> */}
          {/* <div className='goto-page'>
            前往<input type="text" id='target-page' onBlur={
              (e) => {
                const res = Number(e.target.value)
                console.log(res);
                if (Number.isInteger(res)) {
                  const target = Math.round(res);
                  updateCurrentInfo(pageSize, target)
                }
              }
            } />页
      </div> */}
        </div>
      </div>
    </div>
  );
}

Case.path = '/case';
Case.title = '学习病例';
Case.meta = {
  keywords:
    '学习病例',
  description:
    '宠物医院 学习知识'
};
Case.exact = true;

export default Case;
